<template>
<el-dialog   title="提示" :visible.sync="dialogVisible" width="30%">
    <el-form  ref="formRef" :model="formData" :rules="rules">
        <el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
            <el-input v-model="formData.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <el-input v-model="formData.sex"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button :loading="loading" type="primary" @click="onSubmit">提交</el-button>
            <el-button  @click="onReset">重置</el-button>
        </el-form-item>
    </el-form>
    </el-dialog>
</template>
<script>
export default {
    data() {
        return {
            loading:false,
            dialogVisible: false,
            formData: {
               
                name: '',
                age: '',
                sex: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                ]
            },
            timer:null,
        }
    },
    methods: {
      
   
        setDialogVisible() {
            this.dialogVisible = true
        },
        debounce(fn, delay) {
           return  (...args)=> {
               if(this.timer) clearTimeout(this.timer)
               this.timer = setTimeout(() => {
                   fn.apply(this, args)
               }, delay)
           }
        },
    

        onSubmit() {
            this.$refs.formRef.validate(valid => {
                if (valid) {
                       this.loading = true
                        setTimeout(() => {
                            this.handleData()
                        }, 3000)
                } else {
                    this.$message.error('提交失败')
                }
            })
        },
        handleData(){
            this.$message.success('提交成功')
            this.dialogVisible = false
            this.$emit('submit', this.formData)
            this.loading = false
        },
        onReset() {
            this.$refs.formRef.resetFields()
        }
    }
}
// 防抖去解决问题? 实现一下 如果接口请求很慢怎么办 
// setTimetout(fn,delay) 模拟接口 接口很慢 耗时3s 那这个时候弹框还不会被关闭 这个时候又能点击
// 了 2.1s 2.2s
// loading+防抖解决问题 这才是我们想要的东西
</script>